<template>
	<view class="container">
		<page-header></page-header>
		<view class="yyz-container">
			<view class="yzz-tabs">
				<view class="yyz-tab-item" :class="current_cid==item.id?'active':''" v-for="(item, index) in cates" @click="setCates(item.id)">
					<view class="yyz-tab-item-flag"></view>
					{{ item.title}}
				</view>
			</view>
			<scroll-view class="yyz-list" scroll-y="{{true}}" @scrolltolower="scrolltolower" >
				<template v-for="(item, index) in list">
					<template v-if="item.type!=1">
						<a class="yyz-list-item"   @click="viewYyz(item)">
							<image :src="item.thumb"></image>
							<view class="yyz-list-item-title" v-if="item.title">
								{{item.title}} 
							</view>
						</a>
						
					</template>
					
					<template v-if="item.type==1">
						<a class="yyz-list-item" @click="viewYyz(item)">
							
						
						<wx-open-launch-weapp 
							id="launch-btn"
							:appid="item.appid"
							:path="item.page"
							style="position:absolute;left:0;right: 0;top:0;bottom: 0;
							background-color: rgba(0,0,0,0);
							 display: flex;justify-content: center;align-items: center;z-index: 2;"
						>
						
							<script  v-is="'script'" type="text/wxtag-template">
								<style v-is="'style'">
									.miniprogram{position:absolute;left:0;right:0;top:0;bottom:0;height:100%;width:100%;}
								</style>
								<view class="miniprogram"></view>
							</script>	`					
						</wx-open-launch-weapp>
							<image :src="item.thumb"></image>
							<view class="yyz-list-item-title" v-if="item.title">
								{{item.title}} 
							</view>
						</a>	
						
					</template>
					
				</template>
				
				
			 
			</scroll-view>
		</view>
		<view v-show="vflag">
			<video :src="vsrc" :poster="poster" id="myVideo" @fullscreenchange="fullscreenchange" loop @play="playEvent" @pause="pauseEvent"	></video>
		</view>
	</view>
</template>

<script>
	import pageHeader from '@/components/header/header.vue';
	import api from '@/api/index.js'
	export default {
		components:{
			pageHeader
		},
		data() {
			return {
				current_cid:0,
				page:1,
				pagination:{
					current:0,
				},
				cates:[],
				list:[],
				videoContext:null,
				vsrc:'',
				vflag:false,
				poster:'',
			}
		},
		onLoad(){
			this.getInfo();
			console.log('onload')
			setTimeout(()=>{
				this.getShare()
			}, 500)
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onShow(){
			console.log(window.location.href);
			//统计数据
			
			let interval = setInterval(()=>{
				 if(uni.getStorageSync('token')) {
					 clearInterval(interval);
					api.getRequest('stat', {
						top:'case',
						sub:'',
						argv:''
					});
				 }
			}, 50)
		},
		methods: {
			playEvent(e){
				console.log(e)
			},
			pauseEvent(e){
				console.log(e)
			},
			fullscreenchange(e){
				if(!e.detail.fullScreen) { // 退出全屏
					this.videoContext.stop();
					this.vsrc = "";
					this.vflag = false;
					this.poster = "";
				}
				else{
					this.videoContext.play();
				}
				console.log(e)
			},
			setCates(cid) {
				if(cid == this.current_cid) return;
				this.current_cid = cid;
				this.page=1;
				this.pagination.current = 0;
				this.list = [];
				this.getInfo();
			},
			getInfo(){
				const that = this;
				api.getRequest('case', {
					cid:this.current_cid,
					page:this.pagination.current+1,
					}).then((res)=>{
					
					let response = res.data;
					that.cates = response.cates;
					if(that.current_cid == 0 && that.cates.length>0) {
						that.current_cid = that.cates[0].id;
					}
					if(response.list.pagination.current == 1) {
						that.list = response.list.data;
					}
					else if(that.page < response.list.pagination.current){
						that.list = that.list.concat(response.list.data);
					}
					that.pagination = response.list.pagination
					that.page = that.pagination.current;
					
				})
			},
			viewYyz(item) {
				console.log(item)
				console.log(item.link)
				
				//统计数据
				api.getRequest('stat', {
					top:'case_detail',
					sub:'',
					argv:item.id
				});
				
				
				if(item.type == 1)  return ;//小程序跳转
				
				if(item.type == 0) {
						uni.navigateTo({
							url:'/pages/web/web?src='+encodeURIComponent(item.link)
						})
				}
				else if(item.type ==2 ) {
					if(item.video) {
						this.vsrc = item.video;
						this.poster = item.thumb;
						this.vflag = true;
						this.videoContext.play();
						this.videoContext.requestFullScreen();
					}
				}
				else if(item.type == 3) {
					if(item.news && item.news.link) {
						uni.navigateTo({
							url:'/pages/web/web?src='+encodeURIComponent(item.news.link)
						})
					}
					else {
						uni.navigateTo({
							url:'/pages/detail/detail?type=news&id='+item.news.id
						})
					}
				}
				
				return ;
			},
			scrolltolower(e) {
				console.log('scrolltolower')
				this.getInfo();
			},
			getShare(){
				 const that = this;	
				 let uuid = "";
				 if(this.$route.query.uuid) {
				 	uuid = this.$route.query.uuid;
				 	uni.setStorageSync('uuid', uuid)
				 }
				 else {
				 	uuid = uni.getStorageSync('uuid');
				 }
				 api.getRequest('shareData', {
				 	uuid:uuid,
					url:window.location.href
				 }).then((res)=>{
					 let response = res.data;
					 console.log('set setting', response);
					 
					 that.setShare(response.setting);
				 });
			},
			setShare(setting){
				let link = setting.shareLink;
				// if(uuid) link+='&uuid='+uuid;
				window.jWeixin.updateAppMessageShareData({ 
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				
				window.jWeixin.updateAppMessageShareData({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				window.jWeixin.onMenuShareAppMessage({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				window.jWeixin.onMenuShareTimeline({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
			}
		}
	}
</script>



<style scoped>
	.yyz-container{
		position: absolute;
		left: 0;
		right: 0;
		top:72rpx;
		bottom: 0;		
		overflow: hidden;
	}
	
	.yzz-tabs{
		position: absolute;
		left: 0;
		top:0;
		bottom: 0%;
		width: 250rpx;
		background-color: #251340;
	}
	 .yyz-tab-item{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #96939b;
		position: relative;
		color: #fff;
	}
	
	 .yyz-tab-item.active{
		font-weight: bold;
		color: #fff;
		background-color: #34144b;
	}
	 .yyz-tab-item-flag{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 10rpx;
		background-color: #9122bc;
		display: none;
	}
	.yyz-tab-item.active .yyz-tab-item-flag{
		display: block;
	}
	.yyz-list{
		position: absolute;
		right:0;
		top:0;
		bottom: 0rpx;
		width: 500rpx;
		font-size: 0;
		overflow: hidden;
	}
	.yyz-list-item{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
		box-sizing: border-box;
		height: 230rpx;
		border-radius: 15rpx;
		overflow: hidden;
		position: relative;
		display: block;
	}
	
	.yyz-list-item-title{
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.8);
		font-size: 20rpx;
		color: #fff;
		display: flex;
		align-items: center;
		height: 30rpx;
		padding: 20rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.yyz-list-item iframe, .yyz-list-item image{
		width: 100%;
		height: 100%;
	}
	.yyz-list-item-mask{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0);
	}
</style>



<style>
	@import '@/static/css/common.css';
	
</style>